<template>
  <el-steps :active="stepData?.stepNum" align-center>
    <el-step
      v-for="item in stepData?.stepList"
      :key="item.title"
      :title="item.title"
      :description="item.description"
    />
  </el-steps>
</template>

<script setup lang="ts">
import { PropType, ref, watch } from 'vue';
import { formatDate } from '@/utils/util';

interface StepList {
  title: string;
  description: string;
}

// 组装描述
const getTimeText = (timestamp: string, prefixText: string, failText: string) =>
  timestamp ? `${prefixText}：${formatDate(timestamp)}` : failText;

//  获取步骤条列表
const useGetStepData = () => {
  let stepList: StepList[] = [];
  let stepNum: number = 0;

  // 已取消
  if (props.detailData.state === '9') {
    stepList = [
      {
        title: '已申请',
        description: getTimeText(
          props.detailData.createTime,
          '申请时间',
          '未申请'
        )
      },
      {
        title: '已拒绝',
        description: getTimeText(
          props.detailData.refuseTime,
          '拒绝时间',
          '未拒绝'
        )
      }
    ];
    stepNum = stepList.length;
  }

  // 正常订单流程
  else {
    // 状态-售后：1-已申请，2-已同意，3-已回寄，4-已处理，5-已完成，9-已拒绝
    stepList = [
      {
        title: '已申请',
        description: getTimeText(
          props.detailData.createTime,
          '申请时间',
          '未申请'
        )
      },
      {
        title: '已同意',
        description: getTimeText(
          props.detailData.confirmTime,
          '同意时间',
          '待同意'
        )
      },
      {
        title: '已回寄',
        description: getTimeText(
          props.detailData.returnTime,
          '回寄时间',
          '待回寄'
        )
      },
      {
        title: '已处理',
        description: getTimeText(
          props.detailData.replyTime,
          '处理时间',
          '待处理'
        )
      },
      {
        title: '已完成',
        description: getTimeText(
          props.detailData.completeTime,
          '完成时间',
          '待完成'
        )
      }
    ];
    stepNum = +props.detailData.state;
  }

  return {
    stepList: stepList.filter((item) => !!item),
    stepNum
  };
};

let stepData = ref<{ stepList: StepList[]; stepNum: number }>();

// props
const props = defineProps({
  detailData: {
    type: Object as PropType<API.appeal.EntitySchema>,
    default: () => ({})
  }
});

watch(
  () => props.detailData,
  (val) => {
    if (!val) return;
    stepData.value = useGetStepData();
  },
  {
    immediate: true
  }
);
</script>

<style lang="scss" scoped></style>
